<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="pagination">
          <el-pagination
            v-if="paginations.total > 0"
            :page-size="paginations.page_size"
            :layout="paginations.layout"
            :total="paginations.total"
            :current-page.sync="paginations.page_index"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Paginations',
  props: {
    paginations: {
      type: Object,
      required: true,
      default: function() {
        return {
          page_index: 1, // 当前位于哪页
          total: 0, // 总数
          page_size: 10, // 1页显示多少条
          layout: 'total,prev, pager, next '// 翻页属性
        }
      }
    }
  },
  methods: {
    handleCurrentChange(page) {
      this.$emit('changePage', page)
    }
  }
}
</script>

<style scoped>
  .pagination {
    text-align: right;
    margin-top: 10px;
    padding: 10px;
  }
</style>
